<template>
    <div class="paddB60">
        <div style="margin-left: 20px;margin-right: 20px;margin-top: 5px;">
            <el-table
                    :data="workflowData"
                    border
                    :cell-style="cellStyle"
                    :header-cell-style="headRowStyle"
                    style="width: 100%">
                <el-table-column
                        prop="workflow_name"
                        label="流程名称"
                        align="center"
                        width="220">
                    <!--<template slot-scope="scope">
                        <el-input v-model="scope.row.workflow_name" placeholder="请输入流程名称" size="small"></el-input>
                    </template>-->
                </el-table-column>
                <el-table-column
                        label="审批节点"
                        header-align="center">
                    <template slot-scope="scope">
                        <draggable v-model="scope.row.process" @update="datadragEnd" :options = "{animation:500}">
                        <div v-for="(item,index) in scope.row.process" style="display: inline-block;border: 1px solid #d1d1d1;width: 240px;height: 100%;vertical-align: top;padding: 10px 5px;">
                            <div style="text-align: right;">
                                <el-button @click.native.stop="delProcess(scope.$index,index)" type="text" size="small" style="padding: 2px 5px;" title="删除节点">
                                    <icon name="del" class="scaleIcon1" title="删除节点" @click.native.stop="delProcess(scope.$index,index)" style="cursor:pointer;"></icon>
                                </el-button>
                            </div>
                            <div>
                                <span class="processSpan">节点名称</span>
                                <el-input placeholder="请输入节点名称" size="mini" v-model="item.process_name" style="width: 225px;"></el-input>
                            </div>
                            <div>
                                <span class="processSpan">审批人员</span>
                                <el-select v-model="item.user_id" multiple placeholder="请选择审批人员" filterable size="mini" style="width: 225px;">
                                    <el-option
                                            v-for="user in userData"
                                            :key="user.id"
                                            :label="user.user_name"
                                            :value="user.id">
                                        <span style="float: left">{{ user.user_name }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ user.department }}</span>
                                    </el-option>
                                </el-select>
                            </div>
                            <div>
                                <span class="processSpan">都需审批</span>
                                <el-switch v-model="item.process_condition" active-color="#13ce66" inactive-color="#ff4949" active-value='1' inactive-value='0'></el-switch>
                            </div>
                            <div>
                                <span class="processSpan">退回节点可选</span>
                                <el-switch v-model="item.can_select" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"></el-switch>
                            </div>
                        </div>
                        </draggable>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="启用"
                        align="center"
                        width="80">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.state" @change="changeState(scope.row)"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="addProcess(scope.$index, scope.row)">增加节点</el-button>
                        <el-button size="mini" type="primary" @click="saveWorkflow(scope.$index, scope.row)">保存</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    import { mapGetters } from 'vuex'
    export default {
        //name: "workflow"
        data() {
            return {
                workflowData: [],
                userData: [],
            }
        },
        methods: {
            changeState:function(row){
                let data = {};
                data.id = row.id;
                data.state = row.state ? 1 : 0;
                this.apiPost('admin/workflow/state',data).then(res=>{
                    if (typeof res === 'string'){
                        res = JSON.parse(res);
                    }
                    if (res.code == 200){
                        _g.toastMsg('success',res.message);
                    } else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            addProcess:function(index,row){
                let user = {};
                user.id = '';
                user.user_name = '';
                let data = {workflow_id:row.process.workflow_id,user_id:'',process_name:'',process_condition:0,process_index:99,can_select:0,user:user};
                this.workflowData[index].process.push(data);
                console.log(index,row);
            },
            delProcess:function(index,i){
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.id = this.workflowData[index].process[i].id;
                    this.apiPost('admin/workflow/del',data).then(res=>{
                        if (typeof res === "string"){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.workflowData[index].process.splice(i,1);
                        }
                    })
                }).catch(()=>{});
            },
            saveWorkflow:function(index,row){
                this.$confirm('是否确认保存?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.id = row.id;
                    data.state = row.state == true ? 1 : 0;
                    data.workflow_name = row.workflow_name;
                    data.process = row.process;
                    this.apiPost('admin/workflow/save',data).then(res=>{
                        if (res.code == 200){
                            _g.toastMsg('success',res.message);
                        } else{
                            _g.toastMsg('error',res.message);
                        }
                    });
                }).catch();

                console.log(index,row);
            },
            /* 表体单元格样式 */
            cellStyle:function({row, column, rowIndex, columnIndex}){
                return {'padding':'0'};
            },
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;';
            },
            /* 获取流程信息列表 */
            getWorkflowData:function () {
                this.apiPost('admin/workflow/get','').then(res=>{
                    if (res.code == 200){
                        this.workflowData = res.data;
                    } else{
                        _g.toastMsg('error',res.message);
                    }
                });
            },
            /* 获取所有未离职人员的信息 */
            getUserData:function () {
                this.apiPost('admin/workflow/getUser','').then(res=>{
                    if (res.code == 200){
                        this.userData = res.data;
                    } else{
                        _g.toastMsg('error',res.message);
                    }
                });
            }
        },
        mounted: function () {
            this.getWorkflowData();
            this.getUserData();
        },
        mixins: [http]
    }
</script>

<style scoped>
    .operatBtnBig{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        width: 44px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle:hover,.operatBtnBig:hover{
        background-color: #f5b466;
    }
    .processSpan{
        font-size: 13px;
        display: inline-block;
        width: 100px;
    }
</style>